<template>
  <div>
    <vue-loading v-show="!isLoaded"></vue-loading>
    <div v-show="isLoaded">
      <Table :request-data="requestData" v-on:list="listHander" ref="table">
        <template slot="search-box">
          <el-form-item style="margin-left:10px;">
            <el-button
              style="width:80px;"
              icon="el-icon-plus"
              type="warning"
              size="small"
              @click="handleShowDialog('add',nil)"
              round
            >新增</el-button>
          </el-form-item>
        </template>
        <template slot="table-box">
          <el-table :data="tableData" stripe style="width: 100%">
            <el-table-column label="添加日期" width="200">
              <template slot-scope="scope">
                <span>{{ $utils.formatDateTime(scope.row.add_time)}}</span>
              </template>
            </el-table-column>
            <el-table-column prop="seller" label="主图" width="150">
              <template slot-scope="scope" >
                <el-avatar
                  style="margin-top:6px;cursor:pointer"
                  shape="square"
                  :size="40"
                  fit="fill"
                  :src="scope.row.main_image"
                   @click.native="handleShowImage(scope.row.main_image)"
                ></el-avatar>
              </template>
            </el-table-column>
            <el-table-column prop="title" label="标题">
              <template slot-scope="scope">
                <el-link
                  type="info"
                  :href="scope.row.source_url"
                  :underline="false"
                  target="_blank"
                >{{scope.row.title}}</el-link>
              </template>
            </el-table-column>

            <el-table-column prop="price" label="价格(积分)" width="150">
              <template slot-scope="scope">
                <span>{{scope.row.price}}</span>
              </template>
            </el-table-column>

            <el-table-column prop="quantity" label="库存" width="150"></el-table-column>
            <el-table-column prop="sales" label="销量" width="150"></el-table-column>
            <el-table-column fixed="right" label="操作" width="100">
              <template slot-scope="scope">
                <i
                  class="el-icon-edit main-ico-btn"
                  @click="handleShowDialog('update',scope.$index)"
                ></i>
                <i class="fa fa-trash-o main-ico-btn" @click="handleRemove(scope.$index)"></i>
              </template>
            </el-table-column>
          </el-table>
        </template>
      </Table>
      <el-dialog :visible.sync="dialogVisible" custom-class="dialog" @close="handleDialogClose">
        <el-row>
          <el-col :span="24" class="main-h-center">
            <el-form label-position="right" label-width="50px" style="width:700px;">
              <el-form-item label="标题">
                <el-input v-model="goods.title" placeholder="商品主标题"></el-input>
              </el-form-item>
              <el-form-item label="详情">
                <el-input v-model="goods.subtitle" placeholder="商品详情内容" type="textarea" :rows="3"></el-input>
              </el-form-item>
              <el-form-item label="价格">
                <el-col :span="6">
                  <el-form-item label>
                    <el-input v-model="goods.price" placeholder="商品价格" type="number"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="9">
                  <el-form-item label="库存" style="margin-left:20px;">
                    <el-input v-model="goods.quantity" placeholder="库存数量" type="number"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="9">
                  <el-form-item label="销量" style="margin-left:20px;">
                    <el-input v-model="goods.sales" placeholder="单位（件）" type="number"></el-input>
                  </el-form-item>
                </el-col>
              </el-form-item>
              <el-form-item label="主图">
                <el-input v-model="goods.main_image" placeholder="商品主图网址"></el-input>
              </el-form-item>
              <el-form-item label="来源">
                <el-input v-model="goods.source_url" placeholder="这件商品的来源网址"></el-input>
              </el-form-item>
              <el-form-item style="margin-bottom: 0;">
                <el-col :span="16">
                  <span style="color:#F56C6C">提示：主图与来源必须是网址，需要自行采集。</span>
                </el-col>
                <el-col :span="8">
                  <el-button
                    id="btn"
                    type="primary"
                    @click="handleGoods"
                    style="float:right"
                  >{{this.dialogType=='add'?'立即添加':'立即修改'}}</el-button>
                </el-col>
              </el-form-item>
            </el-form>
          </el-col>
        </el-row>
      </el-dialog>
      <el-dialog :visible.sync="imageVisible">
        <img width="100%" :src="imageUrl" alt />
      </el-dialog>
    </div>
  </div>
</template>
<script>
import Table from "@/components/Table.vue";
export default {
  components: {
    Table
  },
  data() {
    return {
      dialogType: "",
      imageUrl: "",
      imageVisible: false,
      dialogVisible: false,
      isLoaded: false,
      requestData: {
        urlPath: "/goods/list",
        postData: {
          page_num: 1
        }
      },
      tableData: [],
      currentModify: {},
      goods: {
        add_time: 0,
        title: "",
        subtitle: "",
        main_image: "",
        price: 0,
        quantity: 0,
        source_url: "",
        sales: 0
      }
    };
  },
  methods: {
    listHander(e) {
      this.tableData = e;
      this.isLoaded = true;
    },
    search() {
      this.$refs.table.init();
    },
    handleGoods() {
      let url = "";
      if (this.dialogType == "add") {
        this.$http
          .post("/goods/create", this.goods)
          .then(res => {
            if (res.code == 200) {
              this.goods.add_time = Date.now();
              this.tableData.push(this.goods);
              this.$message({
                message: res.msg,
                type: "success"
              });
            } else {
              this.$message.error(res.msg);
            }
          })
          .catch(err => {
            this.$message.error(err.msg);
          });
      } else if (this.dialogType == "update") {
        this.$http
          .post("/goods/update", this.goods)
          .then(res => {
            if (res.code == 200) {
              if (res.code == 200) {
                this.$message({
                  message: res.msg,
                  type: "success"
                });
              } else {
                this.$message.error(res.msg);
              }
            } else {
              this.$message.error(res.msg);
            }
          })
          .catch(err => {
            this.$message.error(err.msg);
          });
      }
    },

    handleShowDialog(type, index) {
      this.dialogVisible = true;
      this.dialogType = type;
      if (type == "add") {
        this.dialogVisible = {
          title: "",
          subtitle: "",
          main_image: "",
          price: 0,
          quantity: 0,
          source_url: "",
          sales: 0
        };
      } else if (type == "update") {
        this.goods = this.tableData[index];
      }
    },
    handleShowImage(image) {
        console.log(image);
        
      this.imageVisible = true;
      this.imageUrl = image;
    },
    async handleRemove(index) {
      await this.$confirm("此操作将永久删除该条数据, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      });
      this.$http
        .post("/goods/delete", this.tableData[index])
        .then(res => {
          if (res.code == 200) {
            this.tableData.splice(index, 1);
          } else {
            this.$message.error(res.msg);
          }
        })
        .catch(err => {
          this.$message.error(err.msg);
        });
    },
    handleDialogClose() {
      this.goods = {};
    }
  },
  created() {}
};
</script>
<style>
.dialog {
  width: 700px;
}
</style>



